<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单维护</title>
    <link href="https://cdn.bootcss.com/element-ui/2.2.2/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<div id="orderOperation">
    <el-form v-model="form" ref="form" :inline="true">
        <el-form-item>
            <el-input v-model="form.orderid" placeholder="请输入订单编号"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchOrder()">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-form v-model="form2" ref="form2" :inline="true">
        <el-form-item>
            <el-input v-model="form.uname" placeholder="请输入用户姓名"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchOrderByName()">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-form v-model="form3" ref="form3" :inline="true">
        <el-form-item>
            <el-input v-model="form.umobile" placeholder="请输入用户手机号"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchOrderByMobile()">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-table
            :data="tableData"
            max-height="100%"
            height = "150">
        <el-table-column
                id="columnOrderId"
                prop="orderid"
                label="订单编号"
                width="180"
                fixed="left">
        </el-table-column>
        <el-table-column
                id="columnStartTime"
                prop="starttime"
                label="预定时间"
                width="200">
        </el-table-column>
        <el-table-column
                id="columnEndTime"
                prop="endtime"
                label="拍摄时间"
                width="200">
        </el-table-column>
        <el-table-column
                id="columnPrice"
                prop="price"
                label="价格"
                width="80">
        </el-table-column>
        <el-table-column
                id="columnStatus"
                prop="status"
                label="订单状态"
                width="150">
            <template slot-scope="scope">
                <el-tag>{{scope.row.status}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
                id="columnPersonnum"
                prop="personnum"
                label="总人数"
                width="80">
        </el-table-column>
        <el-table-column
                id="columnName"
                prop="uname"
                label="用户姓名"
                width="100">
        </el-table-column>
        <el-table-column
                id="columnMobile"
                prop="umobile"
                label="用户电话"
                width="150">
        </el-table-column>
        <el-table-column
                id="columnClass"
                prop="class"
                label="用户班级"
                width="200">
        </el-table-column>
        <el-table-column
                id="columnPname"
                prop="pname"
                label="摄影师"
                width="100">
        </el-table-column>
        <el-table-column
                id="columnPmobile"
                prop="pmobile"
                label="摄影师电话"
                width="150">
        </el-table-column>
        <el-table-column
                id="columnCompany"
                prop="company"
                label="摄影师所属公司"
                width="150">
        </el-table-column>
        <el-table-column
                id="columnMessage"
                prop="message"
                label="额外信息"
                width="100">
        </el-table-column>


        <el-table-column
                id="edit"
                label="编辑"
                width="80">
            <template slot-scope="scope">
                <el-button
                        @click="dialogFormVisible = true">编辑
                </el-button>
            </template>
        </el-table-column>

        <el-table-column
                id="delete"
                label="删除"
                width="80">
            <template slot-scope="scope">
                <el-button
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row, tableData)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog title="订单编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form_edit" label-width="80px">
            <el-form-item label="预约时间" required>
                <el-col :span="11">
                    <el-form-item prop="bookday">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form_edit.bookday" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-form-item prop="booktime">
                        <el-select v-model="form_edit.booktime" placeholder="选择时间段">
                            <el-option label="8:00-10:00" value="1"></el-option>
                            <el-option label="10:00-12:00" value="2"></el-option>
                            <el-option label="14:00-16:00" value="3"></el-option>
                            <el-option label="16:00-18:00" value="4"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="价格" required>
                <el-input v-model="form_edit.price" ></el-input>
            </el-form-item>
            <el-form-item label="总人数" required>
                <el-input v-model="form_edit.total"></el-input>
            </el-form-item>
            <el-form-item label="订单状态" prop="status" required>
                <el-select v-model="form_edit.status" placeholder="请选择订单状态">
                    <el-option label="未通话" value="0"></el-option>
                    <el-option label="已通话" value="1"></el-option>
                    <el-option label="正在拍摄" value="2"></el-option>
                    <el-option label="拍摄完成" value="3"></el-option>
                    <el-option label="订单完成" value="4"></el-option>
                    <el-option label="用户中途取消" value="-1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="附加信息" required>
                <el-input v-model="form_edit.message" placeholder="没有请填写无"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateOrder()">确 认</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.2.2/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: '#orderOperation',
        data: {
            form: {
                orderid:''
            },
            tableData: [],
            dialogFormVisible: false,
            form_edit: {
                bookday:'',
                booktime:'',
                price:'',
                status:'',
                message:''
            },
        },
        methods: {
            searchOrder() {
                var orderdata = []
                var _this = this
                axios.get('/backsys/getdetail', {
                    params: {
                        'orderid': this.form.orderid
                    }
                })
                    .then(function (response) {
                        for (let i = 0; i < response.data.length; i++) {
                            var status = response.data[i].status
                            if (status == 0) {
                                status = '未通话'
                            }
                            else if (status == 1) {
                                status = '已通话'
                            }
                            else if (status == 2) {
                                status = '正在拍摄'
                            }
                            else if (status == 3) {
                                status = '拍摄完成'
                            }
                            else if (status == 4) {
                                status = '订单完成'
                            }
                            else if (status == -1) {
                                status = '用户中途取消'
                            }
                            var booktime = response.data.booktime
                            if (booktime == 0) {
                                booktime = '8:00-10:00'
                            }
                            else if (booktime == 1) {
                                booktime = '10:00-12:00'
                            }
                            else if (booktime == 2) {
                                booktime = '14:00-16:00'
                            }
                            else if (booktime == 3) {
                                booktime = '16:00-18:00'
                            }
                            var endtime = response.data.endTime
                            if (endtime == null || endtime.equals("")) {
                                endtime = '尚未完成'
                            }
                            var obj = {};
                            obj.orderid = _this.form.orderid
                            obj.starttime = response.data.bookday.toString().substring(0, 10) + "  " + booktime;
                            obj.endtime = endtime;
                            obj.price = response.data.price;
                            obj.status = status;
                            obj.personnum = response.data.personnum;
                            obj.uname = response.data.uname;
                            obj.umobile = response.data.umobile;
                            obj.class = response.data.udepart + "学院" + response.data.umajor + "专业" + response.data.ubatch + "班";
                            obj.pname = response.data.pname;
                            obj.pmobile = response.data.pmobile;
                            obj.company = response.data.pcompany;
                            obj.message = response.data.message;
                            orderdata[i] = obj
                        }
                        vm.tableData = orderdata
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            // handleEdit(index, row) {
            //     dialogFormVisible = true
            //
            // },
            handleDelete(index, row, rows) {
                axios.get('/backsys/deleteorder', {
                    params: {
                        orderid: row.orderid
                    }
                })
                    .then(function (response) {
                        if (response.data.trim() == 'SUCCESS')
                            rows.splice(index, 1);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            updateOrder() {
                if (this.tableData[0].orderid!=null&&this.form_edit.bookday!=null&&this.form_edit.booktime!=null&&this.form_edit.price!=null&&this.form_edit.status!=null&&this.form_edit.message!=null&&this.form_edit.total!=null) {
                    axios({
                        method: 'post',
                        url: '/backsys/updateorder',
                        headers: {
                            'Content-type': 'application/x-www-form-urlencoded'
                        },
                        params: {
                            'orderid': this.tableData[0].orderid,
                            'bookday': this.form_edit.bookday,
                            'booktime': this.form_edit.booktime,
                            'price': this.form_edit.price,
                            'status': this.form_edit.status,
                            'message': this.form_edit.message,
                            'total': this.form_edit.total
                        }
                    })
                        .then(function (response) {
                            console.log(response)
                            if (response.data.trim() == 'SUCCESS') {
                                location.reload();
                            } else {
                                alert(response.data);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
                else {
                    this.$alert('请填写完整', '提示', {
                        confirmButtonText: '确定'
                    });
                }
            },
            searchOrderByName() {
                var orderdata = []
                var _this = this
                axios.get('/backsys/getordersbyname', {
                    params: {
                        'uname': this.form.uname
                    }
                })
                    .then(function (response) {
                        for (let i = 0; i < response.data.length; i++) {
                            var status = response.data[i].status
                            if (status == 0) {
                                status = '未通话'
                            }
                            else if (status == 1) {
                                status = '已通话'
                            }
                            else if (status == 2) {
                                status = '正在拍摄'
                            }
                            else if (status == 3) {
                                status = '拍摄完成'
                            }
                            else if (status == 4) {
                                status = '订单完成'
                            }
                            else if (status == -1) {
                                status = '用户中途取消'
                            }
                            var booktime = response.data.booktime
                            if (booktime == 0) {
                                booktime = '8:00-10:00'
                            }
                            else if (booktime == 1) {
                                booktime = '10:00-12:00'
                            }
                            else if (booktime == 2) {
                                booktime = '14:00-16:00'
                            }
                            else if (booktime == 3) {
                                booktime = '16:00-18:00'
                            }
                            var endtime = response.data.endTime
                            if (endtime == null || endtime.equals("")) {
                                endtime = '尚未完成'
                            }
                            var obj = {};
                            obj.orderid = _this.form.orderid
                            obj.starttime = response.data.bookday.toString().substring(0, 10) + "  " + booktime;
                            obj.endtime = endtime;
                            obj.price = response.data.price;
                            obj.status = status;
                            obj.personnum = response.data.personnum;
                            obj.uname = response.data.uname;
                            obj.umobile = response.data.umobile;
                            obj.class = response.data.udepart + "学院" + response.data.umajor + "专业" + response.data.ubatch + "班";
                            obj.pname = response.data.pname;
                            obj.pmobile = response.data.pmobile;
                            obj.company = response.data.pcompany;
                            obj.message = response.data.message;
                            orderdata[i] = obj
                        }
                        vm.tableData = orderdata
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            searchOrderByMobile() {
                var orderdata = []
                var _this = this
                axios.get('/backsys/getordersbymobile', {
                    params: {
                        'umobile': this.form.umobile
                    }
                })
                    .then(function (response) {
                        for (let i = 0; i < response.data.length; i++) {
                            var status = response.data[i].status
                            if (status == 0) {
                                status = '未通话'
                            }
                            else if (status == 1) {
                                status = '已通话'
                            }
                            else if (status == 2) {
                                status = '正在拍摄'
                            }
                            else if (status == 3) {
                                status = '拍摄完成'
                            }
                            else if (status == 4) {
                                status = '订单完成'
                            }
                            else if (status == -1) {
                                status = '用户中途取消'
                            }
                            var booktime = response.data.booktime
                            if (booktime == 0) {
                                booktime = '8:00-10:00'
                            }
                            else if (booktime == 1) {
                                booktime = '10:00-12:00'
                            }
                            else if (booktime == 2) {
                                booktime = '14:00-16:00'
                            }
                            else if (booktime == 3) {
                                booktime = '16:00-18:00'
                            }
                            var endtime = response.data.endTime
                            if (endtime == null || endtime.equals("")) {
                                endtime = '尚未完成'
                            }
                            var obj = {};
                            obj.orderid = _this.form.orderid
                            obj.starttime = response.data.bookday.toString().substring(0, 10) + "  " + booktime;
                            obj.endtime = endtime;
                            obj.price = response.data.price;
                            obj.status = status;
                            obj.personnum = response.data.personnum;
                            obj.uname = response.data.uname;
                            obj.umobile = response.data.umobile;
                            obj.class = response.data.udepart + "学院" + response.data.umajor + "专业" + response.data.ubatch + "班";
                            obj.pname = response.data.pname;
                            obj.pmobile = response.data.pmobile;
                            obj.company = response.data.pcompany;
                            obj.message = response.data.message;
                            orderdata[i] = obj
                        }
                        vm.tableData = orderdata
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
            }
    })
</script>
</html>